<template>
  <div class="ssc-search">
    <a-row :gutter="24">
      <a-col :span="4">
        <a-form-item label="状态">
          <a-select v-model:value="searchForm.status" placeholder="请选择状态">
            <a-select-option value="">请选择状态</a-select-option>
            <a-select-option v-for="item in stateList" :key="item.code" :value="item.code">{{ item.lable }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="项目名称" v-bind="validateInfos.keyWord">
          <a-input v-model:value="searchForm.keyWord" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="发布日期">
          <a-range-picker v-model:value="searchForm.publishTime" show-time :allowClear="false" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-row justify="end">
          <a-button @click="clear()">重置</a-button>
          <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { Form } from 'ant-design-vue'
  import { nextTick, onMounted, reactive, toRaw } from 'vue'

  const emit = defineEmits<(e: 'search', params: RequirementTypes.SearchData) => void>()
  const searchForm = reactive<RequirementTypes.SearchData>({
    status: undefined,
    publishTime: [],
    keyWord: '',
  })
  const stateList = reactive<RequirementTypes.StateData>([
    { code: 1, lable: '已发布' },
    { code: 2, lable: '已下架' },
  ])

  const { validate, validateInfos, resetFields } = Form.useForm(searchForm, {})

  // 查询
  const clear = async () => {
    await resetFields()
    await search()
  }

  // 查询
  const search = () => {
    validate().then(() => {
      nextTick(() => {
        emit('search', {
          ...toRaw(searchForm),
        })
      })
    })
  }

  onMounted(() => {
    search()
  })
</script>
<style lang="less" scoped></style>
